<script setup>
import Cookies from 'js-cookie'
import { useUserStore } from '@/store/user'
const userStore = useUserStore()
const route = useRoute()
const router = useRouter()
const { proxy } = getCurrentInstance()

const title = import.meta.env.VITE_APP_TITLE

const loginForm = ref({ username: '', password: '' })

const loginRules = {
    username: [{ required: true, trigger: 'blur', message: '请输入您的账号' }],
    password: [{ required: true, trigger: 'blur', message: '请输入您的密码' }]
}

const loading = ref(false)
const redirect = ref(undefined)

watch(route, (newRoute) => {
    redirect.value = newRoute.query && newRoute.query.redirect
}, { immediate: true })

function handleLogin() {
    proxy.$refs.loginRef.validate(valid => {
        if (valid) {
            loading.value = true
            userStore.login(loginForm.value).then(() => {
                Cookies.set('username', loginForm.value.username, { expires: 30 })
                const query = route.query
                const otherQueryParams = Object.keys(query).reduce((acc, cur) => {
                    if (cur !== 'redirect') {
                        acc[cur] = query[cur]
                    }
                    return acc
                }, {})
                router.push({ path: redirect.value || '/', query: otherQueryParams })
            }).catch(() => {
                loading.value = false
            })
        }
    })
}

function getCookie() {
    const username = Cookies.get('username')
    if (username !== undefined) {
        loginForm.value.username = username
    }
}
getCookie()
</script>

<template>
    <div class="login-wrapper">
        <div class="modal">
            <el-form ref="loginRef" :model="loginForm" :rules="loginRules">
                <div class="title">{{ title }}</div>
                <el-form-item>
                    <el-input type="text" prefix-icon="User" size="large" v-model="loginForm.username"
                        auto-complete="off" placeholder="账号" />
                </el-form-item>
                <el-form-item>
                    <el-input type="password" prefix-icon="Lock" size="large" v-model="loginForm.password"
                        auto-complete="off" placeholder="密码" @keyup.enter="handleLogin" />
                </el-form-item>
                <el-form-item>
                    <el-button :loading="loading" class="btn-login" type="primary" size="large"
                        @click.prevent="handleLogin">
                        <span v-if="!loading">登 录</span>
                        <span v-else>登 录 中...</span>
                    </el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<style lang="scss">
.login-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f9fcff;
    width: 100vw;
    height: 100vh;

    .modal {
        width: 500px;
        padding: 50px;
        background-color: #fff;
        border-radius: 4px;
        box-shadow: 0 0 10px 3px #c7c9cb4d;

        .title {
            font-size: 40px;
            line-height: 1.5;
            text-align: center;
            margin-bottom: 30px;
        }

        .btn-login {
            width: 100%;
        }
    }
}
</style>